<template>
  <custom-table
    ref="table"
    rowKey="id"
    :showColSettings="false"
    :hideColSettings="['action']"
    :showAlert="false"
    :showSelection="false"
    :loading="loading"
    :columns="columns"
    :dataSource="pageData"
    @change="onTableChange"
  >
    <template slot="phoneNumber" slot-scope="text, record">
      <span
        >{{ text }} <a-tag v-if="record.isSamplePerson" style="margin-left:20px;" color="red">负样本人员</a-tag></span
      >
    </template>
  </custom-table>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/caseEvent.js'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  props: ['taskId', 'moduleType'],
  components: {
    CustomTable
  },
  data() {
    return {
      // columns: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 100,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber',
          scopedSlots: { customRender: 'phoneNumber' }
        },
        {
          title: '姓名',
          dataIndex: 'userName'
        }
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 100,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'phoneNumber'
        },
        {
          title: '姓名',
          dataIndex: 'userName'
        },
        {
          title: '人物标签',
          dataIndex: 'tags',
          scopedSlots: { customRender: 'tags' }
        },
        {
          title: '来源任务',
          dataIndex: 'source',
          scopedSlots: { customRender: 'source' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        taskId: this.taskId
      },
      pageData: [],
      loading: false
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    refreshTable() {
      this.loading = true
      api
        .taskUserPageList(this.pageFilter)
        .then(res => {
          this.pageData = res.result
          this.loading = false
          //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
          querySimpleByPhoneList(this, 1, this.pageData.records)
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    }
  }
}
</script>
